Sono aree di una sola riga nelle quali è possibile inserire un testo.
Codice: <input type="text" name="nome" maxlength="10" size=4>
Risultato:
L'attributo name è obbligatorio, altrimenti il contenuto della casella di testo non viene inviato. Conviene inoltre, come vedremo meglio in seguito, dare ad ogni campo un nome che ricordi il suo contenuto.
L'attributo size specifica la lunghezza della casella di testo che viene visualizzata.
L'attributo maxlength specifica il numero massimo dei caratteri che possono essere inseriti nella casella di testo.
La semplice introduzione di una casella di testo non dice però molto all'utente riguardo a quello che deve immettere, le caselle perciò di solito sono precedute da un'etichetta che espliciti il contenuto che si vuole far immettere nel campo specificato. L'etichetta viene scritta semplicemente,nel formato preferito, prima di inserire la casella di testo.
Codice completo:Risultato:
Inserire il nome <input type="text" name="nome" maxlength="10" size=10>
Sono aree di una sola riga nella quale l'utente inserisce un testo che però non viene visualizzato in chiaro.
Codice:
Risultato:
<input type="password" name="parola d'ordine" maxlength="5" size=5>
Gli attributi sono gli stessi delle caselle di testo. Ricorda che l'attributo name è obbligatorio.
Codice completo:
Risultato:
Inserire la parola d'ordine
<input type="password" name="parola d'ordine" maxlength="5" size=5>
Inserire la parola d'ordine
Pulsanti di controllo
Danno la possibilità di selezionare più di una opzione. Essi di solito costituiscono un gruppo.
Codice:
Risultato:
<input type="checkbox" name="leggi" value="uno">
<input type="checkbox" name="leggi" value="due">
Come si può verificare, è possibile selezionare o uno solo o entrambi i pulsanti. Notare inoltre che i due pulsanti condividono la proprietà name, mentre si differenziano per la proprietà value. Ricorda che l'attributo name è obbligatorio. Di solito quando si carica la pagina nessuno dei pulsanti è selezionato. Se però si preferisce che uno dei due, ad esempio il primo, risulti già selezionato, basta aggiungere la proprietà checked al suo interno, come si vede dalla seguente riga di
Codice:
Risultato:
<input type="checkbox" name="leggi" value="uno" checked >
Conviene far precedere i vari pulsanti checkbox da etichette che esplicitino il valore delle scelte. Le etichette vengono scritte,nel formato preferito, ognuna prima del relativo pulsante.
Codice completo:
Risultato: Sei sposato? Hai figli?
Sei sposato? <input type="checkbox" name="leggi" value="sposato">
Hai figli? <input type="checkbox" name="leggi" value="figli">
Fai attenzione all'attributo value: è importante indicare fra virgolette un valore che ne ricordi il significato.
Pulsanti di opzione
Danno la possibilità di selezionare solo un'alternativa. Essi di solito costituiscono un gruppo.
Codice:
Risultato:
<input type="radio" name="sesso" value="m">
<input type="radio" name="sesso" value="f">
Come si può verificare, è possibile selezionare soltanto uno dei pulsanti. Notare inoltre che i due pulsanti condividono la proprietà name, mentre si differenziano per la proprietà value. Ricorda che l'attributo name è obbligatorio. Di solito quando si carica la pagina nessuno dei pulsanti è selezionato. Se però si preferisce che uno dei due, ad esempio il primo, risulti già selezionato, basta aggiungere la proprietà checked al suo interno, come si vede dalla seguente riga di
Codice:
Risultato:
<input type="radio" name="sesso" value="m" checked >
Conviene far precedere i vari pulsanti radio da etichette che esplicitino il valore delle scelte. Le etichette vengono scritte,nel formato preferito, ognuna prima del relativo pulsante.
Codice completo:
Risultato: Maschio Femmina
Maschio <input type="radio" name="sesso" value="m">
Femmina <input type="radio" name="sesso" value="f">
Fai attenzione all'attributo value: è importante indicare fra virgolette un valore che ne ricordi il significato.
Elenchi a discesa
Permettono di selezionare solo una tra le varie scelte disponibili, ed in questo sono simili ai pulsanti radio. Offrono il vantaggio di occupare minore spazio in una pagina, ed inoltre non è necessario aggiungere etichette.
Codice: | Come si nota, l'elemento select è sempre usato insieme a vari elementi option. Accanto ad ogni elemento option viene inserita una scelta. E' stata aggiunta all'inizio un'etichetta che chiarisca il significato delle scelte da effettuare. Ricorda che l'attributo name è obbligatorio. |
Risultato:
Dove compri di solito i libri?
E' una casella di testo con più righe.
Codice:Risultato:
<textarea name="testo" rows="2" cols="10"></textarea>
Gli attributi rows e cols specificano rispettivamente il numero di righe e di colonne che saranno visibili all'utente. Ricorda che l'attributo name è obbligatorio.
Se si inserisce del testo fra i tag <textarea> e </textarea > questo sarà visualizzato al caricamento della pagina. L'utente potrà copiare e incollare il testo, come si vede dal seguente esempio.
Per vedere come aggiungere il codice per evidenziare e copiare il contenuto di un'area di testo clicca qui!
Codice:Risultato:
<textarea name="testo" rows="2" cols="10">
Questo testo può essere copiato, cancellato o corretto.
</textarea>
Pulsante Invia
Determina l'azione specificata da "action" nel form.
Codice:
<input type="submit" name="Invia" value="INVIA">
Pulsante Cancella
Reimposta il form: cancella tutti i dati immessi dall'utente.
Codice:
<input type="reset" name="Cancella" value="CANCELLA">
©2002 www.webfract.it